<template>
  <div :class="$style.delivery">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="deliveryForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="provinceId" label="所属省">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/adminidiv"
              filterable
              :remote="false"
              placeholder="请输入所属省"
              lable-name="name"
              value-name="id"
              method="get"
              :value.sync="formData.provinceId"
              :lable.sync="formData.provinceName"
              @selectChange="provinceChange"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="cityId" label="所属市">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/adminidiv"
              filterable
              :remote="false"
              placeholder="请输入所属市"
              lable-name="name"
              value-name="code"
              method="get"
              :must-pid="true"
              :parent-id="formData.provinceId"
              :params="{query:{id:formData.provinceId},type:0}"
              :value.sync="formData.cityId"
              :lable.sync="formData.cityName"
              @selectChange="cityChange"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="districtId" label="所属区（县）">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/adminidiv"
              filterable
              :remote="false"
              placeholder="请输入所属区县"
              lable-name="name"
              value-name="code"
              method="get"
              :must-pid="true"
              :parent-id="formData.cityId"
              :params="{query:{id:formData.cityId},type:0}"
              :value.sync="formData.districtId"
              :lable.sync="formData.districtName"
              @selectChange="districtChange"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="townId" label="所属镇（街）">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/adminidiv"
              filterable
              :remote="false"
              placeholder="请输入所属镇（街）"
              lable-name="name"
              value-name="code"
              method="get"
              :must-pid="true"
              :parent-id="formData.districtId"
              :params="{query:{id:formData.districtId},type:0}"
              :value.sync="formData.townId"
              :lable.sync="formData.townName"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="officeCode" label="办事处">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/office/ref/page"
              filterable
              placeholder="请输入办事处"
              lable-name="name"
              value-name="code"
              method="get"
              :value.sync="formData.officeCode"
              :lable.sync="formData.agencyName"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="serviceProviderId1" label="第一服务商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/b2c/service/page"
              filterable
              placeholder="请输入第一服务商"
              lable-name="name"
              value-name="id"
              custom-name="name"
              :params="{query:{name: formData.serviceProviderId1Name}, type: 1}"
              :value.sync="formData.serviceProviderId1"
              :lable.sync="formData.serviceProviderId1Name"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="serviceProviderId2" label="第二服务商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/b2c/service/page"
              filterable
              placeholder="请输入第二服务商"
              lable-name="name"
              value-name="id"
              custom-name="name"
              :params="{query:{name: formData.serviceProviderId2Name}, type:1}"
              :value.sync="formData.serviceProviderId2"
              :lable.sync="formData.serviceProviderId2Name"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="isExpressDistribute" label="快递配送">
            <el-select v-model="formData.isExpressDistribute" filterable clearable placeholder="请选择配送区域">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="isSendArea" label="送装区域">
            <el-select v-model="formData.isSendArea" filterable clearable placeholder="请选择送装区域">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="isSevenDaysDeliver" label="7天发货区域">
            <el-select v-model="formData.isSevenDaysDeliver" filterable clearable placeholder="请选择7天发货区域">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="provincialStatus" label="省启用状态">
            <el-select v-model="formData.provincialStatus" filterable clearable placeholder="请选择省启用状态">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="cityStatus" label="城市启用状态">
            <el-select v-model="formData.cityStatus" filterable clearable placeholder="请选择城市启用状态">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="districtStatus" label="区县启用状态">
            <el-select v-model="formData.districtStatus" filterable clearable placeholder="请选择区县启用状态">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="townStatus" label="街/镇启用状态">
            <el-select v-model="formData.townStatus" filterable clearable placeholder="请选择街镇启用状态">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item align="left">
            <Button @click="resetClick('deliveryForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('deliveryForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="deliveryTable"
        no-request
        :table-config="deliveryTableConfig"
        :other-raw="{}"
      />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { JsonToUrl } from '@/utils/params-format'
import { deepCopy } from '@/utils/'
export default {
  name: 'InfoDataDelivery',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker
  },
  data() {
    return {
      formData: {
        provinceId: '', // 所属省
        cityId: '', // 所属城市
        districtId: '', // 所属县区
        townId: '', // 所属街道
        officeCode: '',
        agencyName: '', // 办事处
        serviceProviderId1: '', // 第一服务商
        serviceProviderId1Name: '',
        serviceProviderId2: '', // 第二服务商
        serviceProviderId2Name: '',
        isExpressDistribute: '', // 是否快递配送
        isSendArea: '', // 送装区域
        isSevenDaysDeliver: '', // 7天发货区域
        provincialStatus: '', // 省启用状态
        cityStatus: '', // 城市启用状态
        districtStatus: '', // 区县启用状态
        townStatus: '' // 街道镇启用状态
      },
      formRules: {
        // province: { required: true, message: '请输入所属省份', trigger: 'blur' }
      },
      url: '/call-center/api/v1/mscInfo/b2c/relation',
      deliveryTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            label: '序号',
            type: 'index',
            formatData: (val) => { return val.keyIndex + 1 }
          }, {
            prop: 'provinceName',
            label: '所属省',
            width: 90
          }, {
            prop: 'provincialStatus',
            label: '省启用状态',
            width: 110,
            formatData: (val) => { return Number(val.provincialStatus) === 1 ? '启用' : Number(val.provincialStatus) === 0 ? '停用' : '--' }
          }, {
            prop: 'cityName',
            label: '所属市',
            width: 90
          }, {
            prop: 'cityStatus',
            label: '市启用状态',
            width: 110,
            formatData: (val) => { return Number(val.cityStatus) === 1 ? '启用' : Number(val.cityStatus) === 0 ? '停用' : '--' }
          }, {
            prop: 'districtName',
            label: '所属区（县）',
            width: 120
          }, {
            prop: 'districtStatus',
            label: '所属区（县）启用状态',
            width: 180,
            formatData: (val) => { return Number(val.districtStatus) === 1 ? '启用' : Number(val.districtStatus) === 0 ? '停用' : '--' }
          }, {
            prop: 'townName',
            label: '所属镇（街）',
            width: 120
          }, {
            prop: 'townStatus',
            label: '所属镇（街）启用状态',
            width: 180,
            formatData: (val) => { return Number(val.townStatus) === 1 ? '启用' : Number(val.townStatus) === 0 ? '停用' : '--' }
          }, {
            prop: 'isSaleArea',
            label: '是否销售区域',
            width: 120,
            formatData: (val) => { return Number(val.isSaleArea) === 1 ? '是' : Number(val.isSaleArea) === 0 ? '否' : '--' }
          }, {
            prop: 'agencyName',
            label: '办事处',
            width: 130
          }, {
            prop: 'serviceProvider1Name',
            label: '第一服务商',
            width: 160
          }, {
            prop: 'serviceProvider2Name',
            label: '第二服务商',
            width: 160
          }, {
            prop: 'isQidaysDeliver',
            label: '7天发货区域',
            width: 120,
            formatData: (val) => { return Number(val.isQidaysDeliver) === 1 ? '是' : Number(val.isQidaysDeliver) === 0 ? '否' : '--' }
          }, {
            prop: 'account1Name',
            label: '第一业务账号',
            width: 120
          }, {
            prop: 'senderCode1Name',
            label: '第一送达方',
            width: 120
          }, {
            prop: 'account2Name',
            label: '第二业务账号',
            width: 120
          }, {
            prop: 'senderCode2Name',
            label: '第二送达方',
            width: 120
          }, {
            prop: 'isSendArea',
            label: '送装区域',
            width: 100,
            formatData: (val) => { return Number(val.isSendArea) === 1 ? '是' : Number(val.isSendArea) === 0 ? '否' : '--' }
          }, {
            prop: 'isExpressDistribute',
            label: '快递配送',
            width: 100,
            formatData: (val) => { return Number(val.isExpressDistribute) === 1 ? '是' : Number(val.isExpressDistribute) === 0 ? '否' : '--' }
          }, {
            prop: 'freight',
            label: '标准运费',
            width: 100
          }, {
            prop: 'cityFreight',
            label: '城区运费',
            width: 100
          }, {
            prop: 'ruralFreight',
            label: '乡镇运费',
            width: 100
          }, {
            prop: 'is_Warranty',
            label: '三包区域',
            width: 100,
            formatData: (val) => { return Number(val.is_Warranty) === 1 ? '是' : Number(val.is_Warranty) === 0 ? '否' : '--' }
          }, {
            prop: 'baiduDistance',
            label: '百度距离',
            width: 100
          }, {
            prop: 'areaEmployee',
            label: '区域专员',
            width: 100
          }, {
            prop: 'postscript',
            label: '通知开通/关闭时间',
            width: 150
          }, {
            prop: 'dispatchType',
            label: '配送方式',
            width: 100
          }, {
            prop: 'storePhone',
            label: '门店电话',
            width: 100
          }, {
            prop: 'storeAddress',
            label: '门店地址',
            width: 100
          }
        ]
      }
    }
  },
  created() {
    this.deliveryTableConfig.interfacePath = this.url
  },
  mounted() {},
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const obj = deepCopy(this.formData)
          const deleteArr = ['provinceName', 'cityName', 'districtName', 'townName', 'officeCode', 'serviceProviderId1Name', 'serviceProviderId2Name']
          deleteArr.forEach(item => { if (obj[item]) delete obj[item] })
          const deliveryParams = JsonToUrl(obj)
          if (!deliveryParams) {
            this.$message({
              message: '请至少输入一项查询条件',
              type: 'warning'
            })
            return
          }
          this.deliveryTableConfig.interfacePath = `${this.url}${deliveryParams}`
          this.$nextTick(() => {
            this.$refs.deliveryTable.initTableData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置搜索
    resetClick(formName) {
      // this.$set(this.formData, 'agencyName', '')
      Object.keys(this.formData).forEach(k => {
        this.$set(this.formData, k, '')
      })
      this.$refs[formName].resetFields()
    },
    provinceChange() {
      this.formData.cityId = ''
      this.formData.districtId = ''
      this.formData.townId = ''
    },
    cityChange() {
      this.formData.districtId = ''
      this.formData.townId = ''
    },
    districtChange() {
      this.formData.townId = ''
    }
  }
}
</script>

<style lang="scss" module>
.delivery {}
</style>
